@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* 确保样式生效的强制样式 */
.h-screen {
  height: 100vh !important;
}

.flex {
  display: flex !important;
}

.flex-col {
  flex-direction: column !important;
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
}

.from-slate-50 {
  --tw-gradient-from: #f8fafc !important;
  --tw-gradient-to: rgb(248 250 252 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to) !important;
}

.to-slate-100 {
  --tw-gradient-to: #f1f5f9 !important;
}

.backdrop-blur-xl {
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8) !important;
}

.border-slate-200\/50 {
  border-color: rgb(226 232 240 / 0.5) !important;
}

.rounded-md {
  border-radius: 0.375rem !important;
}

.rounded-lg {
  border-radius: 0.5rem !important;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.transition-all {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

.hover\:bg-slate-100:hover {
  background-color: #f1f5f9 !important;
}

.text-slate-700 {
  color: #334155 !important;
}

.text-slate-500 {
  color: #64748b !important;
}

.bg-blue-500 {
  background-color: #3b82f6 !important;
}

.bg-red-500 {
  background-color: #ef4444 !important;
}

.bg-yellow-500 {
  background-color: #eab308 !important;
}

.bg-green-500 {
  background-color: #22c55e !important;
}

.w-3 {
  width: 0.75rem !important;
}

.h-3 {
  height: 0.75rem !important;
}

.rounded-full {
  border-radius: 9999px !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

/* 深色模式样式 */
.dark .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, #0f172a, #1e293b, #334155) !important;
}

.dark .bg-white\/80 {
  background-color: rgb(15 23 42 / 0.8) !important;
}

.dark .border-slate-200\/50 {
  border-color: rgb(51 65 85 / 0.5) !important;
}

.dark .text-slate-700 {
  color: #cbd5e1 !important;
}

.dark .text-slate-500 {
  color: #94a3b8 !important;
}

.dark .hover\:bg-slate-100:hover {
  background-color: #1e293b !important;
}